<template>
	<!-- 礼包详情 -->
<view class="d">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">礼包详情</block>
	</cu-custom>		
	<view class="DetailsPackage">
		<view>
			<swiper class="imgList round-dot" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in list" :key="index" class="list">
					<image :src="item" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<view class="top">
				<view class="int">
					<view class="price text-price">{{ Info.price }}</view>
					<view class="sub text-price">{{ Info.cost_price }}</view>
				</view>
				<view class="title">
					<view class="text-df">{{ Info.package_name }}</view>
					<view class="text-xs text-gray">{{ Info.introduce }}</view>
				</view>
				<view class="sell">
					库存
					<text>:</text>
					{{ Info.stock }}
				</view>
			</view>			
			<view class="info">
				<view class="ceremony">礼包详情</view>
				<view class="com">
					<rich-text :nodes="Info.description"></rich-text>
				</view>
			</view>
			<view class="btn" @click="Buy">{{Info.buy}}</view>
		</view>
	</view>	
</view>
</template>

<script>
	import { DetailsPackage } from '@/common/api/lbt'
	export default {
		name: 'DetailsPackage',
		data () {
			return {
				Info: {},
				list:[],
				indicatorDots: true,
				autoplay: false,
				interval: 5000,
				duration: 1000,
				tag: 0
			}
		},
		onLoad(opt) {
			this.package_id=opt.id
			if (opt.tag) this.tag = opt.tag 
			this.getInfo(opt)
		},
		methods: {
			getInfo (params) {
				const package_id = params.id
				DetailsPackage({ package_id }).then(res => {
					if (!res.data.code) {
						this.Info=res.data
						this.list = res.data.img_arr
					}
				})
			},
			Buy(){
				let tag = !this.tag ? '' : `&tag=${this.tag}`
				uni.navigateTo({
					url:'/pages/orders/create?type=2&package_id='+ this.package_id + tag,
				})
			
			}
		}
	}
</script>

<style lang="less">
	@import '../../common/styles/variables.less';
	.d {
		overflow: hidden;
	}
	.DetailsPackage{
		.imgList {
			height: 730upx;
			.list {
				& > image {
					width: 100%;
					height: 100%;
				}
			}
		}
	.top {
		padding: 10px 15px;
		background: white;
		.int {
			display: flex;
			align-items: center;
			.price {
				color: @red;
				font-weight: bold;
				font-size: 36upx;
				display: flex;
				align-items: center;
				text {
					font-size: @minSize;
					font-weight: bold;
					padding-right: 5px;
				}
			}
			.sub {
				font-size: @minSize;
				color: @gray;
				padding-left: 20upx;
				text-decoration: line-through
			}
		}
		.title {
			view {
				line-height: 46upx;
				font-weight: 500;
				.twoLine(2);
			}
			image {
				width: 50upx;
				height: 50upx;
				display: block;
				margin-left: 15upx;
			}
		}
		.sell {
			text {
				margin: 0 5px;
			}
			color: @gray;
			font-size: 24upx;
		}
	}		
		.info{
			background-color:white;
			margin-top: 15upx;
			padding-bottom: calc(@height + 20upx);
			.ceremony {
				height: @height;
				font-size: @medium;
				display: flex;
				align-items: center;
				.border-bottom(15upx);
				padding-left: 35upx;
				position: relative;
				&::before {
					content:  '';
					position: absolute;
					top: 0;
					height: 100%;
					width: 6upx;
					background-color: @red;
					left: 15upx;
					transform: scaleY(.4);
				}
			}
			.com {
				padding: 15upx;
				font-size:@minSize;
			}
		}
		.btn{
			position: fixed;
			left: 0;
			bottom: 0;
			text-align: center;
			width: 100%;
			color: white;
			background-color: @red;
			height: @height;
			line-height:@height;
			font-size: @medium;
		}
	}
</style>
